'use client'

import { UploadCloud, Brain, FileText } from 'lucide-react'
import FXCanvas from '@/components/effect/FXCanvas'
import { Card, CardContent } from '@/components/ui/card'

export default function ProcessFlow() {
  const steps = [
    {
      num: '01',
      icon: <UploadCloud className="w-8 h-8 text-cyan-400" />,
      title: 'Upload Your Decks',
      desc: 'Drop your pitch decks in PDF or PowerPoint. Bulk uploads supported.'
    },
    {},
    {
      num: '02',
      icon: <Brain className="w-8 h-8 text-cyan-400" />,
      title: 'AI Deep Dive',
      desc: 'Extracts market, model, momentum and cross-references claims with live data.'
    },
    {},
    {
      num: '03',
      icon: <FileText className="w-8 h-8 text-cyan-400" />,
      title: 'Partner-Ready Memos',
      desc: 'Structured analysis with recommendation, outcome profiles and transparent rationale.'
    }
  ]

  const steps2 = [
    {
      num: '01',
      icon: <UploadCloud className="w-8 h-8 text-cyan-400" />,
      title: 'Upload Your Decks',
      desc: 'Drop your pitch decks in PDF or PowerPoint. Bulk uploads supported.'
    },
    {
      num: '02',
      icon: <Brain className="w-8 h-8 text-cyan-400" />,
      title: 'AI Deep Dive',
      desc: 'Extracts market, model, momentum and cross-references claims with live data.'
    },
    {
      num: '03',
      icon: <FileText className="w-8 h-8 text-cyan-400" />,
      title: 'Partner-Ready Memos',
      desc: 'Structured analysis with recommendation, outcome profiles and transparent rationale.'
    }
  ]

  return (
    <div className="relative min-h-[92svh] h-auto w-full overflow-hidden flex items-center justify-center">
      <div className="section-accent accent-1 absolute inset-0 z-0 h-full w-full"></div>

      <div className="fx h-full w-full">
        <FXCanvas effect="constellations" />
      </div>

      <div className="inset-0 z-10 flex items-center justify-center">
        <div className="mx-auto">
          <div className="relative text-gray-300 py-32 px-6 md:px-20 overflow-hidden">
            {/* 顶部标题区 */}
            <div className="text-center mb-20">
              <h2 className="text-[44px] font-bold text-white leading-tight">
                We do the heavy lifting — <br />
                <span className="bg-gradient-to-r from-[#8b5cf6] to-[#38bdf8] text-transparent bg-clip-text">
                  you focus on conviction
                </span>
              </h2>
              <p className="mt-6 text-gray-400 text-[18px]">
                Objective insight that never gets tired, ready in minutes.
              </p>
            </div>

            {/* 三步流程区 pc */}
            <div className="hidden md:flex flex-col md:flex-row justify-center items-center gap-8 md:gap-8 max-w-6xl mx-auto relative overflow-visible">
              {steps.map((step, i) => (
                <div key={i}>
                  {i != 1 && i != 3 && (
                    <div className="flex flex-col items-start">
                      {/* 数字 + 图标 */}
                      <div className="flex items-center gap-3 mb-3">
                        <span className="text-4xl font-bold bg-gradient-to-r from-[#8b5cf6] to-[#38bdf8] text-transparent bg-clip-text">
                          {step.num}
                        </span>
                        <div className="p-2 bg-gradient-to-r from-[#8b5cf6]/10 to-[#38bdf8]/10 rounded-xl">
                          {step.icon}
                        </div>
                      </div>

                      {/* 标题与描述 */}
                      <div className="text-[16px] font-semibold text-white mb-2">{step.title}</div>
                      <p className="text-[18px] text-gray-400 leading-relaxed">{step.desc}</p>
                    </div>
                  )}

                  <div>{(i == 1 || i == 3) && <div className="relative arrow"></div>}</div>
                </div>
              ))}
            </div>

            {/* 三步流程区 mobile */}
            <div className="md:hidden flex flex-col justify-center gap-4">
              {steps2.map((f, i) => (
                <Card
                  key={i}
                  className="group relative overflow-hidden bg-[#101622]
      border-solid border-[#1f2533] rounded-[14px]  
      transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)]
      hover:-translate-y-[3px] hover:border-[#7C5CFF99] hover:border-2 hover:border-solid 
      w-full">
                  <CardContent className="flex flex-col items-start justify-center text-left p-4 space-y-1 h-full">
                    {/* 图标区 */}
                    <div className="flex items-center gap-3 mb-1">
                      <span className="text-4xl font-bold bg-gradient-to-r from-[#8b5cf6] to-[#38bdf8] text-transparent bg-clip-text">
                        {f.num}
                      </span>
                      <div
                        className="p-2 rounded-xl bg-gradient-to-br from-[#8b5cf6]/20 to-[#38bdf8]/20 
          transition-transform duration-300 ease-out group-hover:scale-110">
                        {f.icon}
                      </div>
                    </div>

                    <div className="text-[16px] font-semibold text-white transition-colors duration-300 group-hover:text-white">
                      {f.title}
                    </div>

                    <p className="text-gray-400 text-[18px] leading-relaxed transition-colors duration-300 group-hover:text-gray-300">
                      {f.desc}
                    </p>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
